<!DOCTYPE HTML>
<html lang="cn">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

  <title>吴伟俊个人主页</title>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" media="screen">
  <meta name="description" content="一个热爱骑行与运动的IT民工，在一线城市漂泊着。愿天空不再阴霾，愿我们都能微微的笑像小孩。">
  <meta name="keywords" content="偏于图形和展示的前端开发,偶尔做UI设计师,IT民工,爱折腾的站长,李传个人网站,鸥鹭,前端开发,UI设计,设计个站" />
  <meta name="viewport" content="width=320" />
  <meta name="baidu-site-verification" content="fH19cTf6Zt" />
  <style>
    /*html{*/
    /*    -webkit-filter: grayscale(.95);*/
    /*}*/
    * {
      box-sizing: border-box;
    }

    .avatar {
      width: 180px;
      position: absolute;
      left: 50%;
      margin-left: -90px;
      text-align: center;
      padding-top: 10px;
    }

    .avatar img {
      width: 100%;
    }

    body {
      background-color: #000;
      background-image: url('https://img.oulu.me/bg-m.jpg');
      background-attachment: fixed;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;

      color: #fff;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 100;
      letter-spacing: 1px;
      text-shadow: 2px 1px 0 #000;
    }

    article {
      position: relative;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 0 20px 20px 20px;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 31%, rgba(0, 0, 0, 0.5) 100%);
    }

    h1 {
      font-size: 20px;
      font-weight: 200;
    }

    p {
      font-size: 15px;
      line-height: 2em;
      opacity: 0.9;
      margin: 0;
    }

    a {
      color: #7bd7fe;
      text-decoration: none;
      border-bottom: 1px dotted rgba(0, 180, 255, 0);
      transition: all 0.2s;
      margin-right: 5px;
    }

    a:hover {
      color: #a1e1fc;
      border-bottom: 1px dotted rgba(88, 192, 235, 1);
    }

    /* a.banquan {
      display: none;
    } */

    .qr_code {
      width: 100;
      text-align: center;
      display: inline-block;
      width: 100%;
      padding-top: 220px;
    }

    .qr_code img {
      width: 100px;
    }

    .qr_code p {
      text-align: center;
      font-size: 12px;
      text-align: center;
      line-height: 20px;
    }

    @media (min-width: 700px) {
      body {
        background-image: url('https://img.oulu.me/bg-l.jpg');
      }

      article {
        position: absolute;
        padding: 50px;
      }

      h1 {
        font-size: 40px;
        margin-bottom: 20px;
      }

      p {
        font-size: 18px;
      }

      .qr_code img {
        width: 150px;
      }

      .qr_code {
        text-align: left;
        padding-left: 42px;
      }

      .qr_code p {
        text-align: left;
        margin-top: 5px;
      }
    }

    @media (min-width: 1200px) {
      body {
        background-image: url('https://img.oulu.me/bg-xl.jpg');
      }

      a.banquan {
        display: block;
      }

      .qr_code img {
        width: 150px;
      }

      article {
        position: absolute;
      }
    }
  </style>
</head>

<body>
  <!--<div class="avatar"><img src="https://img.oulu.me/touxiang.png"/></div>-->
  <!--<div class="qr_code">-->
  <!--<img src="http://img.oulu.me/tfwu_in_pic_qrcode.jpg" alt="">-->
  <!--    <p>俏皮话公众号<br/>更多精彩尽在开发中<br/>欢迎关注</p>-->
  </div>
  <article>
    <!--<p><img src="http://oulu.me/img/weixin.jpg" alt=""></p>-->
    <h1>尘埃的尘</h1>
    </h1>
    <!-- <p>我叫吴伟俊，来自广东的一个小镇~~</p> -->
    <!-- <p>不会设计的前端不是好产品。</p> -->
    <p>愿天空不再阴霾，愿我们都能微微的笑像小孩。</p>
    <p>兴趣之作
      <a href="http://wenjian.wuweijun.fun/" target="_blank" title="文件传输">文件传输</a>，
      <a href="http://hifini.wuweijun.fun/" target="_blank" title="随心听">随心听</a>，
      <a href="http://epub.wuweijun.fun/" target="_blank" title="epub阅读器">epub阅读器</a>，
      <!-- <a href="http://liuyanban.wuweijun.fun:999" target="_blank" title="留言板">留言板</a>， -->
      <a href="http://jiami.wuweijun.fun/" target="_blank" title="加解密">加解密</a>，
      <a href="http://fangsong.wuweijun.fun/" target="_blank" title="放松一下">放松一下</a>，
      <a href="http://shoujishuqian.wuweijun.fun/" target="_blank" title="手机书签">手机书签</a>，
      <!-- <a href="http://target.wuweijun.fun:44403/" target="_blank" title="临时聊天室">临时聊天室</a>， -->
      <!-- <a href="http://target.wuweijun.fun:64974/" target="_blank" title="临时聊天室-限制">临时聊天室-限制</a> -->
    </p>
    <p>实践录
      <a href="http://aware.wuweijun.fun/" target="_blank" title="智能增长">智能增长[网速慢,打开时间长]</a>，
      <a href="http://mtp.wuweijun.fun/" target="_blank" title="mtp码头">mtp码头[网速慢,打开时间长]</a>,
      <a href="http://dev.trunkteam.com:8050/#/" target="_blank" title="年会抽奖系统">年会抽奖系统</a>
    </p>
    </p>
    <p>别人优秀的作品
      <a href="http://321ao.cn/page/lempChat.html" target="_blank" title="聊天室">聊天室</a>，
      <a href="https://www.tfwu.cn/" target="_blank" title="听风读书屋">听风读书屋</a>，
      <a href="https://www.dashuwu.com/" target="_blank" title="大书屋电子书下载">大书屋</a>，
      <a href="https://color.oulu.me/" target="_blank" title="颜色渐变">颜色渐变</a>，
      <a href="https://box.oulu.me/" target="_blank" title="图片盒子">图片盒子</a>，
      <!-- <a href="https://blog.oulu.me/" target="_blank" title="个人博客" >Blog</a> -->
      <a href="http://oulu.me/nice.jpg" target="_blank" title="优秀到不能被忽视">优秀到不能被忽视</a>，
      <a href="http://yu.oulu.me/" target="_blank" title="雨天的心情">雨天心情</a>，
      <a href="http://juzi.oulu.me/" target="_blank" title="句子鸡汤">句子鸡汤</a>
    </p>
    <br>
    <p>Email：1227297881@qq.com</p>
  </article>
  <!-- <a class="banquan" target="_blank"
    style="cursor: pointer; font-size:12px; color: #999; position:absolute; bottom: 30px; right:10px;">当前ip为：<span
      id="ip">xx.xx.xx.xx</span></a> -->
  <a href="https://beian.miit.gov.cn/#/Integrated/index" class="banquan" target="_blank"
    style="font-size:12px; color: #999; position:absolute; bottom:10px; right:10px;">粤ICP备2023072948号-1</a>
  <script>
    var _hmt = _hmt || [];
    // (function() {
    //   var hm = document.createElement("script");
    //   hm.src = "https://hm.baidu.com/hm.js?ec7c3885f8d82ad17c8420955ce9389b";
    //   var s = document.getElementsByTagName("script")[0];
    //   s.parentNode.insertBefore(hm, s);
    // })();

    // fetch('//liuyanban.wuweijun.fun:999/getip', {}).then(response => {
    //   if (response.status >= 200 && response.status < 300) { // 判断请求是否成功
    //     return response.text() // 得到文本字符串。
    //   } else { throw new Error(response.statusText); }
    // }).then(json => {
    //   // console.log(`ip`, json)
    //   document.getElementById('ip').innerText = json;
    //   document.getElementById('ip').parentNode.addEventListener('click', () => { copyText(json);alert("复制成功") })
    // }).catch(err => {
    //   console.log('Request Failed', err)
    // });

    // 复制文本内容
    // function copyText(text) {
    //   let inputDom = document.createElement('textarea');  // 创建一个input元素
    //   inputDom.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘
    //   inputDom.value = text; // 给input元素赋值
    //   document.body.appendChild(inputDom); // 添加到body
    //   inputDom.select(); //选中input元素的内容
    //   document.execCommand('Copy'); // 执行浏览器复制命令
    //   inputDom.style.display = 'none';
    //   inputDom.remove(); // 移除input元素
    // }
  </script>
</body>

</html>